<template>
  <div v-if="form.carGpsSource ==1">
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="GPSMessage" label-width="140px" :rules="type =='detail'?{}:rules" :label-position="type =='detail'?'right':'top'">
        <div class="card-title-wrap">
          <span>GPS信息</span>
          <span></span>
        </div>
        <div style="box-sizing: border-box;padding-left: 20px;">
          <el-row>
            <el-col :span="8">
              <el-form-item label="GPS品牌:" prop="gpsBrand" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.gpsBrand" :disabled="type=='detail'" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.gpsBrand}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="有线个数:" prop="gpsWiredNum" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.gpsWiredNum" :disabled="type=='detail'" oninput="value=value.replace(/^0|[^0-9]/g, '')" maxlength="8"></el-input>
                <span v-if="type=='detail'">{{form.gpsWiredNum}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="无线个数:" prop="gpsWirelessNum" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.gpsWirelessNum" oninput="value=value.replace(/^0|[^0-9]/g, '')" maxlength="8"></el-input>
                <span v-if="type=='detail'">{{form.gpsWirelessNum}}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="GPS服务期限:" prop="gpsTerm" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.gpsTerm" :disabled="type=='detail'" oninput="value=value.replace(/^0|[^0-9]/g, '')" maxlength="8"></el-input>
                <span v-if="type=='detail'">{{form.gpsTerm}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="现场联系人:" prop="contactsName" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.contactsName" :disabled="type=='detail'" maxlength="30"></el-input>
                <span v-if="type=='detail'">{{form.contactsName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="现场联系电话:" prop="contactsPhone" style="width: 80%;">
                <el-input v-if="type !=='detail'" v-model="form.contactsPhone" :disabled="type=='detail'" maxlength="11"></el-input>
                <span v-if="type=='detail'">{{form.contactsPhone}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
    <script>
export default {
  name: "GPSMessage",
  dicts: ["product_scheme_type"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
  },
  data() {
    let checkPhone = (rule, value, callback) => { // 手机号验证
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3456789]\d{9}$/
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return {
      rules: {
        gpsBrand: [
          { required: true, message: "请输入GPS品牌", trigger: "blur" },
        ],
        gpsWiredNum: [
          { required: true, message: "请输入有线个数", trigger: "blur" },
        ],
        gpsWirelessNum: [
          { required: true, message: "请输入无线个数", trigger: "blur" },
        ],
        gpsTerm: [
          { required: true, message: "请输入GPS服务期限", trigger: "blur" },
        ],
        contactsName: [
          { required: true, message: "请输入现场联系人", trigger: "blur" },
        ],
        contactsPhone: [
          { required: true, message: "请输入现场联系电话", trigger: "blur" },
          { validator: checkPhone, trigger: 'blur' }
        ],
      },
    };
  },
  methods: {
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
